<template>
  <div>
    <div class="header">
      <div class="header-zuo">
        <div>海尔账号登录</div>
      </div>
      <div class="header-you">
        <i class="i"></i>
      </div>
    </div>
    <div class="section-box">
      <div class="section">
        <div class="section-div">
          <a href class="a">普通登录</a>
          <a href class="a1">动态密码登录</a>
        </div>
      </div>
      <div class="loginForm">
        <input class="ipt" type="text" placeholder="手机号/邮箱/用户名" v-model="login.phoneNum" />
        <input class="ipt" type="password" placeholder="登陆密码" v-model="login.loginKey" />
        <div class="form-ipt">
          <input type="checkbox" v-model="login.isTrue" />
          <span>
            我同意
            <a href>《海尔注册用户服务条款》</a>
            <a href>《法律声明及隐私权政策》</a>
          </span>
        </div>
        <div class="form-ipt1">
          <input type="checkbox" v-model="login.isTrues" />
          <span>
            两周内免登录
            <a href>忘记密码</a>
          </span>
        </div>
        <div class="formDiv" @click="loginFn">登录</div>
        <div class="formDiv1" @click="zuce">注册海尔账号</div>
      </div>
    </div>
    <div class="footer">
      <div class="weibo">
        <div class="weibo1">
          <img src="../../assets/img/login/weibo.png" alt />
        </div>
        <div class="weibo2">新浪微博</div>
      </div>
      <div class="weixin">
        <div class="weixin1">
          <img src="../../assets/img/login/weixin.png" alt />
        </div>
        <div class="weixin2">微信</div>
      </div>
      <div class="wangyi">
        <div class="wangyi1">
          <img src="../../assets/img/login/wangyi.png" alt />
        </div>
        <div class="wangyi2">网易</div>
      </div>
      <div class="renren">
        <div class="renren1">
          <img src="../../assets/img/login/renren.png" alt />
        </div>
        <div class="renren2">人人</div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/login/denglu.css";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      login: {},
      redirect: null
    };
  },
  methods: {
    ...mapActions("login", ["getLogin", "getInfo"]),
    zuce(){
      this.$router.push("/zuce")
    },
    async loginFn() {
      if (!this.login.phoneNum) {
       this.$message({
          message: '请输入手机号',
          type: 'warning'
        });
        return;
      } else if (!this.login.loginKey) {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        });
        return;
      }
      if (!this.login.isTrue) {
        this.$message({
          message: '请勾选以下选项',
          type: 'warning'
        });
        return;
      }
      if (!this.login.isTrues) {
        this.$message({
          message: '请勾选以下选项',
          type: 'warning'
        });
        return;
      }
      let r = await this.getLogin(this.login);
      if (r.code != 20000) {
        this.$message({
          message: '账号或密码错误',
          type: 'error'
        });
        return;
      }
      let res = await this.getInfo();
      this.$router.push({ path: this.redirect || "/" });
      this.login = {};
    },
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
</style>